<template>
    <div class="clever_deal d-flex" id="cleverDeal_box">
        <Clever></Clever>
        <Deal></Deal>
    </div>
</template>
<script setup lang="ts">
import Clever from "./Clever/index.vue";
import Deal from "./Deal/index.vue";
</script>
<style scoped lang="less">
@media screen and (max-width:1600px){
    .clever_deal {
       flex-direction: column;
    }
}
.clever_deal {
    color: var(--color-2);
    margin-inline: var(--space);
    gap: var(--space);
    margin-bottom: var(--space);
}

:deep(.b-title) {
    margin: 0;
    padding-block: 7px;
    border-bottom: 1px solid var(--border);
    background-color: var(--card);
    padding-left: var(--px);

    .title-tip {
        font-size: 16px;
        font-weight: 900;
    }

    // background-color: green;
}

:deep(.deal),
:deep(.clever) {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    height: inherit;

    .bdy {
        background-color: var(--card);

        .had {
            margin-top: 6px;
            padding-bottom: 6px;
            flex-wrap: nowrap !important;
        }

        .v-col {
            text-wrap: nowrap;
        }

        .v-col:first-child {
            padding-left: var(--px);
        }

        .v-col:last-child {
            padding-right: var(--px);
        }
    }
}

:deep(.bdy) {
    flex: 1;
}
</style>
